<template>
	<view>
		<u-navbar :border-bottom="false" :is-back="false">
			<view class="nav-title">
				<text>购物车</text>
				<u-icon @click="removeAll" width="24" height="24" :name="appletImgUrl+'remove-icon.png'"></u-icon>
			</view>
		</u-navbar>
		<view class="loading" v-if="loading || fail">
			<u-loading :show="loading"></u-loading>
			<u-empty mode="page" :show="fail"></u-empty>
		</view>
		<block v-else>
			<block v-if="list == ''">
				<view style="padding-top: 300rpx;">
					<u-empty mode="car"></u-empty>
				</view>
			</block>
			<block v-else>
				<view class="item" v-for="(item,index) in list" :key="index" v-if="item.cartsList != ''">
					<view class="upper">
						<view>
							<u-checkbox @change="onStoreCheck($event,item)" v-model="item.parentCheckStatus" shape="circle" active-color="#FF4D46"><text
								 class="name">{{item.storeName}}</text></u-checkbox>
						</view>
					</view>
					<view class="lower">
						<u-swipe-action vibrate-short :show="items.show" :index="indexs" v-for="(items,indexs) in item.cartsList" :key="indexs"
						 @click="show = true;ids=items.id;pIndex=index;content='确认删除该商品吗？'" @open="open($event,item.cartsList)" :options="options">
							<view class="lower-item">
								<view class="box">
									<view class="check">
										<u-checkbox @change="onItemCheckState($event,items,index)" v-model="items.checkState" shape="circle"
										 active-color="#FF4D46"></u-checkbox>
									</view>
									<u-image :src="items.goodsPhoto" width="160" height="160" border-radius="10"></u-image>
								</view>
								<view class="info">
									<view class="name">{{items.goodsName}}</view>
									<view class="sku">{{items.goodsSkuInfo}}</view>
									<view class="other">
										<!-- <view class="money"><text>￥</text>{{filterMoney(items)}}</view> -->
										<view class="money"><text>￥</text>{{items.totalPrice}}</view>
										<u-number-box :min="1" v-model="items.goodsCount" @change="valChange($event,items)"></u-number-box>
									</view>
								</view>
							</view>
						</u-swipe-action>
					</view>
				</view>
				<view class="tab">
					<view class="tab-box">
						<view class="all">
							<u-checkbox @change="onCheckAllState" v-model="isAll" shape="circle" active-color="#FF4D46"><text style="font-size: 28rpx;"
								 class="all-title">全选</text></u-checkbox>
						</view>
						<view class="other" @click="submit">
							<view>合计 <text>￥{{money}}</text></view>
							<view>结算（{{number}}）</view>
						</view>
					</view>
					<view class="safe-area-inset-bottom">

					</view>
				</view>
				<u-gap height="25"></u-gap>
				<u-loadmore status="nomore" is-dot />
				<u-gap height="25"></u-gap>
				<u-gap height="98"></u-gap>
				<view class="safe-area-inset-bottom"></view>
				<u-modal show-cancel-button confirm-color="#FE4666" v-model="show" @confirm="confirm" :content="content"></u-modal>
			</block>
		</block>
		
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				content: '',
				loading: true,
				ids: '',
				pIndex: 0,
				options: [{
					text: '删除',
					style: {
						backgroundColor: 'red'
					}
				}],
				money: 0,
				show: false,
				fail: false,
				isAll: false,
				number: 0,
				list: [],
				imageURL: this.imageURL,
				tabBarState: false,
				
			};
		},
		onReady() {
			
		},
		onLoad() {
			
		},
		onShow() {
			this.getGoodsCart()
		},
		methods: {
			removeAll() {
				if (this.list == '') {
					uni.showToast({
						title: '您购物车内还没有商品',
						icon: 'none'
					})
					return
				}
				this.content = '确认清空购物车吗？'
				this.show = true
				let ids = []
				this.list.forEach(item => {
					item.cartsList.forEach(items => {
						ids.push(items.id)
					})
				})
				this.ids = ids.join(',')
				this.removeAllState = true
			},
			confirm() {
				this.$u.get('goodscart/delete/' + this.ids).then(res => {
					if (this.removeAllState) {
						uni.showToast({
							title: '已清空'
						})
						this.list = []
					} else {
						this.list[this.pIndex].cartsList.splice(this.list[this.pIndex].cartsList.findIndex(item => item.id == this.ids),
							1)
						uni.showToast({
							title: '已删除'
						})
					}
				})
			},
			open(index, list) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				list[index].show = true;
				list.map((val, idx) => {
					if (index != idx) list[idx].show = false;
				})
			},
			submit() {
				if (this.number == 0) {
					uni.showToast({
						title: '您还没有选择结算哪些商品',
						icon: 'none'
					})
					return
				}
				uni.setStorageSync('purchasedSeparatelyInfo', this.arr)
				this.$u.route('/pages/purchase/placeOrder/placeOrder', {
					cartsId: JSON.stringify(this.arr.map(item => {
						return item.id
					})),
					purchaseState: 0,
					source: 'goodsCart'
				});
			},
			onCheckAllState(e) {
				this.isAll = e.value
				this.list.forEach(item => {
					item.parentCheckStatus = e.value
					item.cartsList.forEach(items => {
						items.checkState = e.value
					})
				})
				this.calculationTotalPrice()
			},
			onItemCheckState(e, item, index) {
				item.checkState = e.value
				let isCheck = this.list[index].cartsList.filter(item => item.checkState == true)
				this.list[index].parentCheckStatus = isCheck.length == this.list[index].cartsList.length ? true : false
				this.calculationTotalPrice()
			},
			onStoreCheck(e, item) {
				item.parentCheckStatus = e.value
				item.cartsList.forEach(i => {
					i.checkState = e.value
				})
				this.calculationTotalPrice()
			},
			valChange(number, event) {
				this.$u.post('goodscart/updateCart', {
					goodsCount: number.value,
					goodsId: event.goodsId,
					id: event.id
				}).then(res => {
					event.goodsCount = number.value
					event.totalPrice = Math.floor((event.price * event.goodsCount) * 100) / 100
				})
				this.calculationTotalPrice()
			},
			calculationTotalPrice() {
				let arr = []
				this.list.forEach(item => {
					let filter = item.cartsList.filter(item => item.checkState == true)
					arr.push(...filter)
				})
				let money = 0
				arr.forEach(item => {
					money += item.price * item.goodsCount
				})
				this.money = Math.floor(money * 100) / 100
				this.number = arr.length
				let isAll = this.list.filter(item => item.parentCheckStatus == true)
				this.isAll = isAll.length == this.list.length ? true : false
				this.arr = arr
			},
			getGoodsCart() {
				this.$u.get('goodscart/getUserCartList').then(res => {
					res.forEach(item => {
						item.parentCheckStatus = false
						item.cartsList.forEach(items => {
							items.totalPrice = Math.floor((items.price * items.goodsCount) * 100) / 100
							items.checkState = false
							let goodsPhoto = items.goodsPhoto.split(',')
							items.goodsPhoto = this.imageURL + goodsPhoto[0]
							items.show = false
						})
					})
					this.list = res
					this.loading = false
				}).catch(error => {
					this.fail = true
					this.loading = false
				})
			},
			tabChange(index) {
				if (index == 3 || index == 4) {
					if (uni.getStorageSync('userInfo')) {
						return true;
					} else {
						this.$u.route('/pages/user/login/login');
						return false;
					}
				} else {
					return true;
				}
			},
		}
	}
</script>

<style lang="scss">
	.nav-title {
		position: absolute;
		width: 138px;
		left: 375rpx;
		transform: translateX(-50%);
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 16px;
			font-weight: 700;
			// font-weight: bold;
			margin-right: 15rpx;
		}
	}

	.loading {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tab {
		position: fixed;
		width: 100%;
		bottom:128rpx;
		background-color: #FFFFFF;
		left: 0;
		padding: 0 30rpx;
		z-index: 999;

		.tab-box {
			display: flex;
			align-items: center;
			height: 98rpx;
			justify-content: space-between;

			.other {
				display: flex;
				align-items: center;

				>view {
					&:first-child {
						font-size: 30rpx;

						text {
							margin-left: 25rpx;
							font-weight: bold;
							color: #FF4D46;
						}
					}

					&:last-child {
						margin-left: 25rpx;
						line-height: 64rpx;
						background: linear-gradient(90deg, #FF3768, #FC6161);
						font-size: 30rpx;
						padding: 0 55rpx;
						color: #FFFFFF;
						box-shadow: 0px 10rpx 14rpx 2rpx rgba(255, 77, 70, 0.3);
						border-radius: 32rpx;
					}
				}
			}

			.all-title {
				margin-left: 15rpx;
			}
		}
	}

	page {
		background-color: #F7F7F7;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.item {
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 30rpx 0;

		.lower-item {
			display: flex;
			padding: 0 30rpx;
			padding-top: 30rpx;

			.box {
				display: flex;
				align-items: center;
			}

			// align-items: center;
			.info {
				flex: 1;
				padding-left: 30rpx;
				position: relative;

				.name {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 380rpx;
				}

				.sku {
					font-size: 24rpx;
					color: #A5A4A4;
					padding-top: 5rpx;
				}

				.other {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: absolute;
					bottom: 0;
					left: 30rpx;
					width: 380rpx;

					.money {
						color: #FF4D46;
						font-size: 30rpx;

						text {
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.upper {
			border-bottom: 1rpx solid #F3F4F5;
			padding: 0 30rpx;
			padding-bottom: 30rpx;
			display: flex;

			.name {
				font-size: 28rpx;

				margin-left: 25rpx;

			}
		}
	}
</style>
